Adobe  Animate  Basics 


What  is  Adobe  Animate? 


Adobe  Animate,  formerly  known  as  Adobe  Flash,  is  a  multimedia  authoring  and  computer  animation  program. 


Animate  can  be  used  to  design  vector  graphics  and  animation,  and  publish  the  same  for  television  pro¬ 
grams,  online  video,  websites,  web  applications,  rich  internet  applications,  and  video  games. 
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Setup 


You  can  customize  the  workspace  in  Animate  to  best  suite  your  work  method. 


Workspace  Customization: 

•  Open  Adobe  Animate 

•  Select  Window  >  Workspaces  >  Classic 


Workspaces 
Hide  Panels 


Animator 


F4  I  Classic 


Debug 
Designer 
Developer 
V  Essentials 
Small  Screen 

New  Workspace 

Delete  Workspace 

Rpcpt  "Fcc^ntialc" 


Drag  your  Timeline  to  the  bottom  of  the  screen  by  click-and-dragging 
the  top  border  of  the  Timeline.  A  blue  line  will  appear  when  you  can 
place  the  Timeline,  "snapping"  it  to  the  bottom  panel. 

Drag  and  expand  the  Tool  Bar  to  the  left-side  area  of  the  workspace, 
snapping  it  to  the  panel 

Select  the  Color,  Swatches,  and  Brush  Library  icon  and  drag-and-drop 
it  onto  a  the  panel  on  the  right  side  of  the  work  space. 

Set  the  percentage  of  the 
canvas  to  75%  by  clicking  on 
the  drop-down  menu  in  the 
upper-right  of  the  workspace 
and  typing  in  75. 

Completed  Workspace: 


■ 


Propertn 


DdC 


►  Publ'ih 
*  ▼  Prr  pert 


1?1 


Ptf  perties 
FPS: 

Size:  W 


■ 


Stage: 


EH3  ▼  SWF  History 
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Setup  Cont’d 


File  Type  and  Size  Settings: 

•  Select  Edit  >  Preferences  >  Set  Undo:  to  Object-Level 
Undo  and  set  the  levels  to  150 


Select  New  >  General  >  ActionScript  3.0 

-Change  the  Width  to  1280  and  the  Height  to  720 
-Ensure  Frame  Rate  is  24  fps 


General 


Type: 


femplates 


MTML5  Canvas 
Web  GL  (Preview) 


General 
Sync  Settings 
Code  Editor 
Script  Riles 
Compiler 
Text 
Drawing 


Undo:  Object-level  Undo 
15 C  levels 

Auto-Recovery:  ^  10  minutes 

User  Interface: 

v'  Enable  Shading 


Width:  5 

P.Q.  P* 

Height: 

?l  PM 

ActionScript  3.0 

Ruler  units: 

Pixels  t 

AIR  for  Desktop 

AIR  for  Android 

Frame  irate: 

24..CG  fps 

AIR  fori  OS 

Background  color: 

■ 

ill  ActionScript 3.0  Class 

Make  Default 

rT  ■JfiiTbTikFIi 


Quality  Settings: 

•  Go  to  File  >  Publish  Settings 

-Uncheck  HMTL  Wrapper 


•  Increase  the  JPEG  Quality  to  100 


•  Select  Audio  Stream  >  Set  Bit  Rate 
to  160  kbps  >  Set  Quality  to  Best  > 
Uncheck  Convert  Stereo  to  Mono 

•  Select  Audio  Event  >  Set  Bit  Rate  to 
160  kbps  >  Set  Quality  to  Best  > 
Uncheck  Convert  Stereo  to  Mono 


Publish  Settings 


Profile:  Default 


PUBLISH 

Vr  Hash  f.swf) 
SWC 

OTHER  FORMATS 

HTML  Wrapper 
GIF  Image 
JPEG  Image 
PNG  Image 
0AM  Package 
SVG  Image 


Target:  Flash  Player 23 


Script::  ActionScript  3.0 


Output  name: 


Animate 


JPEG  Quality: 


Enable  JPEG  deblocking 


Audio  stream:  MP^.r...l:^..^.P.?x..[v).P.n.9.. 

Audio  event:  MP3f  16  kbps ,  Mono 

Ov  erri  d  e  s  o  u  n  d  s  etti  n  g  s 


ADVANCED 


Sound  Settings 


Compression:  MP3  ▼ 

Preprocessing:  Convert  stereo  to  mono 

Bit  rate:  160  kbps 


Quality:  Best 


OK 

Cancel 
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Selection 
Sub-selection 
Free  Transform 

3D  -  Rotation 

Lasso 

Pen 

Text 

Line 

Rectangle 

Oval 

PolyStar 

Penc'1  [  Shift 
Paint  Brush 

Brush 

Bone 

Paint  Bucket 
Sub-selection 
Ink  Bottle 

Eraser 
Width  Tool 

Camera 

Hand 

Zoom 


Keyboard  Shortcuts 
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3D  -  Translation 


Polygon 


Add  Anchor  Point 
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Rectangle  Primitive 


Oval  Primitive 
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Rotation 
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Magic  Wand 


Delete  Anchor  Point 


Convert  Anchor  Point 


Keyboard  Combos 


<  >  =  Move  forward  &  backward  on  the  timeline 
Enter  =  Play/Stop 

Ctrl  +  Alt  +  C  =  Copy  selected  frames  and  attributes 
Ctrl  +  Alt  +  V  =  Paste  selected  frames  and  attributes 


Ctrl  +  Z  =  Undo 


Ctrl  +  Y  =  Redo 


Ctrl  +  Enter  =  Preview  render 


F5  =  Add  keyframes 
F6  =  Copy  keyframe 

F8  =  Convert  your  media/drawing  to  symbol 
Shift  +  Alt  +  Q  =  Onion  skin 
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Setting  the  Scene 


Select  the  New  Layers  icon  in  the  lower  of  the 
Layers  Panel  four  times 


Timeline 


Double-click  Layer  1  and  rename  it  to  Background 

Re-name  the  next  layers  Clouds,  Stem,  and  Flower  respectively 


l|  Stem 
■Q  Flower 


Clouds 


Backgro.,. 


Creating  a  Background 


Select  the  Background  Layer 


Select  the  Lock  icon  in  the  Layers  Panel  on  all  other  layers 
-This  ensures  no  other  layers  can  be  selected  or  drawn  on 
on  the  Background  Layer 


Select  the  Rectangle  Tool 
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while  working 
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Select  the  rectangle  next  to  the  Fill  Color  icon  below  the  tools 
-Choose  a  blue  for  a  sky  background 


Click-and-drag  the  mouse  from  the  upper  left  corner  to  the  lower  right  corner  of  the 
canvas,  creating  a  background  for  the  animation 


File  Edit  View  Insert  Modify  Text  Commands  Control  Debug  Window  Help 
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Timeline 

O  fl  1  5  10  15  20  25  30  35  40  45  50  55  60  65  70  75  80  85  90  95  100  105  110  115  120  125  130  135  140 
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Setting  the  Scene  Cont’d 


Drawing  Clouds  with  the  Paint  Brush  Tool 


Select  the  Lock  icon  next  to  the  Background  layer 

Select  the  Clouds  layer  and  de-select  the  Lock  icon  next 
to  it 


Select  the  Paint  Brush  Tool  (Y) 


Go  to  Brush  Library  in  the  right-side  area  of  the  work¬ 
space 

Select  Decorative  >  Elegant  Curl...  >  and  Double-Click  a 

cloud  brush 


Properties 

{* /  Paint  Brush  Tool 


•  Select  the  rectangle  next  to  Stroke  in  the  Properties  Panel 
and  choose  a  color  appropriate  for  clouds 

•  Select  the  slider  next  to  the  Stroke  setting  and  slide  it  to  the 
right  to  increase  the  stroke  size 

•  Click-and-drag  across  the  top  of  the  Canvas  to  create  a  cloud 


▼  rin  ana  ^rroice 


Manage  Paint  Brushes 


Width: 

Scale: 


You  can  manipulate  your  creation  by  first  selecting  the 


Selection  Tool  (V) 


and  click-and-dragging  the 


rectangular  box  over  your  creation 
-Then  select  the  Free  Transform  Tool  (Q) 


You  can  Move,  Rotate,  Re-Size,  and  Warp  your  crea¬ 
tion  with  this  tool 


Move  the  White  Circle  in  the  middle  of  the  creation  to 
change  the  Rotation  Point 


•  Using  the  Selection  Tool  (V)  select  the  clouds  you  have  drawn 
and  Right-Click  and  select  Convert  to  Symbol  (F8) 

-Select  Graphic  as  the  Type  an  ensure  the  center  square  of  the 
Registration  icon  is  highlighted 


Convert  to  Symbol 


Name: 


Flower 


Type:  Graphic 
Folder:  Library 
►  Advanced 


Registration: 


OK 

Cancel 
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Setting  the  Scene  Cont’d 


Drawing  a  Flower  Stem  with  the  Paint  Brush  Tool 


•  Select  the  Lock  icon  next  to  the  Clouds  layer 

•  Select  the  Stem  layer,  press  Y  to  bring  up  the  Paint  Brush  Tool  again,  navigate  to  the  Decorative 
>  Elegant  Curl...  >  and  double-click  a  Floral  Brush 

•  Change  the  Stroke  Color  by  selecting  the  Rectangle  by  the  Pencil  Icon  in  the  Properties  Panel 

•  Change  the  Stroke  Size  by  using  the  slider 

•  Draw  a  flower  stem  on  the  canvas 


•  Press  V  to  bring  up  the  Selection  Tool  and  drag  it  over  your  stem  drawing 

(You  can  press  Ctrl  +  G  to  group  your  drawing  together  to  make  editing  easier) 
-Press  F8  to  convert  your  drawing  into  a  Symbol 


Ti  rneli  ne 


Tip: 

You  can  Hide  layers  by  selecting  the  Eye  icon  next  to  each  layer 
You  can  see  just  the  outline  of  your  drawings  on  other  layers  by  selecting  this  icon 


■g  Flower 
■P  Stem 
■I  Gra- 
*g  Clouds 
■g  Backgro...  ^ 


O  A  1 
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Setting  the  Scene  Cont’d 


Drawing  a  Flower  with  the  Brush  Tool 

•  Lock  the  Stem  layer  and  move  onto  the  Flower  layer,  unlocking  it 

•  Select  the  Brush  Tool  (B) 

•  Choose  a  Fill  Color  by  selecting  the  rectangle  next  to  the  Paint  Bucket  icon 

•  Draw  a  flower,  making  it  into  a  complete  shape 

•  Select  the  Paint  Bucket  Tool  (K)  and  fill  in  the  flower 

•  Select  the  flower  and  convert  it  into  a  symbol  (F8) 

Completed  Scene: 


Plano 

Public 

Library 


A  Service  of  the  City  of  Plano 


Animation 


1. 

2. 


Go  to  the  Timeline  to  frame  100  and  click-and-drag  down,  highlighting  frames 
from  all  the  Layers. 

Right-click  and  select  Insert  Frame  or  press  F5 

-This  creates  keyframes  between  the  beginning  of  your  animation  until  the 
100  frame  mark.  There  are  24  frames  in  one  second  of  animation 


3.  Go  to  Frame  10  and  highlight  down  the  frames  again 

4.  Press  F6,  this  creates  duplicate  keyframes  from  the  beginning  with  all  settings  and  attributes 
saved 


5.  While  you  have  those  frames  covered  by  the  red  Timeline  Marker,  go  into  each  layer,  unlock  it, 
and  edit  the  item  slightly  (rotate,  skew,  warp  it) 

-(Press  V  for  the  selection  tool,  select  the  item,  press  Q  to  free  transform  it) 

-Remember,  you  can  change  the  Rotation  Point  of  each  item  by  moving  the  White  Circle 


6.  Go  to  Frame  20  and  repeat  steps  3-5,  changing  the  flower,  stem,  and  clouds  gradually  again 


Ti  rnell  ne 


Ex: 


l|  Flower 
ifl  Stem 

l|  Clouds  J 
■V  Backgro.,.. 
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► 
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•  □ 

•  □ 

•  □ 

> 

•  □ 

•  □ 

1 

Playback 

1.  Select  the  Loop  icon 


underneath  the  Timeline 


2.  Drag  the  borders  of  the  loop  tool  until  it  passes  your 
edited  keyframes 


3.  Press  Enter  to  play  the  animation 
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Tweening 

Short  for  in-betweening,  the  process  of  generating  intermediate  frames  between  two  images  to  give 
the  appearance  that  the  first  image  evolves  smoothly  into  the  second  image. 


•  Select  the  beginning  frame  of  the  Cloud  layer 

•  Right-click  and  select  Create  Classic  Tween 


Create  Motion  Tween 
Create  Shape  Tween 
Create  Classic  Tween 

Convert  to  Frame-by-Frame  Animation 


-The  frames  in  between  the  beginning  and  the  next  edited  keyframe  will  turn  blue. 


-Repeat  this  process  for  each  frame  to  create  a  much  smoother,  gradual  animation 


Tip: 

Highlight  already  edited  keyframes  and  press  Ctrl  +  Alt  +  C  to  copy  them 

Move  down  the  timeline  and  highlight  empty  frames  and  press  Ctrl  +  Alt  +  V  to  paste  the  edited 
keyframes.  This  is  useful  when  wanting  to  return  the  animation  back  to  the  beginning  frame  with¬ 
out  having  to  eyeball  it. 

Exporting 

•  Press  Ctrl  and  click-and-drag  to  cut  the  extra  frames  off  of  the  end  of  your  animation. 

•  Go  up  to  File  >  Export  >  Export  Video  >  Select  Convert  video  in  Adobe  Media  Encoder  >  Export 

•  Under  Preset,  select  the  drop  down  arrow  and  select  YouTube  1080p  HD  at  the  very  bottom 

•  Select  the  Blue  Text  under  Output  File,  select  a  save  location,  and  name  the  file 

•  Select  the  green  Play  icon  to  export  the  video 


Queue  =  Watch  Folders 

+  ^  -  rQ 

Format  Preset 

Q  Flower.mov 

~  H.264  v  YouTube  1080p  HD 
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Resources 


Lynda.com 

-  "Learning  Adobe  Animate  CC"  -  Joseph  Labrecque 

-  "Learning  Adobe  Animate  CC:  Animation"  -  Dermot  O'Connor 


Youtube.com 

-  Draw  with  Jazza  YouTube  Channel: 

"The  ULTIMATE  Guide  to  ADOBE  ANIMATE  CC!  (AKA  Flash)  -  Tutorial" 
"How  to  Animate  a  Bouncing  Ball  -  Like  a  PRO!" 


Adobe.com 

-http://www.adobe.com/devnet/flash/articles/avoiding-mistakes-timeline.html 

-https://helpx.adobe.com/animate/kb/animate-keyboard-shortcuts.html 
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